import { LoginParam } from '@/api/system/user/UserModel'
import { ElForm } from 'element-plus'
import { reactive, ref } from 'vue'
import { useMotion } from '@vueuse/motion'

export default function useBaseLogin(captchaId: any) {
    const loginFormRef = ref<InstanceType<typeof ElForm>>()

    const headTitle = ref()
    const loginUsername = ref()
    const loginPassword = ref()
    const loginVerifyCode = ref()
    const loginBtn = ref()
    const installBtn = ref()

    const refs = [
        headTitle,
        loginUsername,
        loginPassword,
        loginVerifyCode,
        loginBtn,
        installBtn
    ]

    refs.forEach((ref, index) => {
        const { variant } = useMotion(ref, {
            initial: {
                y: 100,
                opacity: 0
            },
            enter: {
                y: 0,
                opacity: 1,
                transition: {
                    type: 'spring',
                    stiffness: 350,
                    damping: 20,
                    delay: index * 50
                }
            }
        })
    })

    const loginModel = reactive<LoginParam>({
        username: '',
        password: '',
        verify_code: '',
        captcha_id: captchaId
    })
    const loginRules = reactive({
        username: [
            { required: true, message: '请输入用户名', trigger: 'blur' },
            {
                min: 3,
                max: 10,
                message: '长度在 3 到 10 个字符',
                trigger: 'blur'
            }
        ],
        password: [
            { required: true, message: '请输入登录密码', trigger: 'blur' },
            {
                min: 6,
                max: 16,
                message: '长度在 6 到 16 个字符',
                trigger: 'blur'
            }
        ],
        verify_code: [
            { required: true, message: '请输入验证码', trigger: 'blur' }
        ]
    })

    return {
        loginModel,
        loginRules,
        loginFormRef,
        headTitle,
        loginUsername,
        loginPassword,
        loginVerifyCode,
        loginBtn,
        installBtn
    }
}
